<script lang="ts" setup>
import { reactive, ref } from "vue";
import { to } from "@/router";
import { useUserStore } from "@/stores";

const userStore = useUserStore();

const formRef = ref();

const form = reactive({
  account: "admin",
  password: "admin",
});

const handleLogin = async () => {
  if (await userStore.login(form)) {
    to("index");
  }
};
</script>

<template>
  <view class="pa-5">
    <view>
      <view class="text-h5 font-weight-medium my-5">登录社团信息发布小程序</view>
    </view>

    <uv-form
      labelPosition="left"
      ref="formRef"
    >
      <uv-form-item
        label="账号"
        borderBottom
      >
        <uv-input
          v-model="form.account"
          border="none"
        >
        </uv-input>
      </uv-form-item>

      <uv-form-item
        label="密码"
        borderBottom
      >
        <uv-input
          v-model="form.password"
          border="none"
          type="password"
        >
        </uv-input>
      </uv-form-item>

      <view class="py-5">
        <uv-button
          type="primary"
          text="登录"
          @click="handleLogin"
        ></uv-button>
      </view>
    </uv-form>
  </view>
</template>

<style lang="less" scoped></style>
